<template>
  <div class="main-container">
    <div class="main-header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path: '/aggregate'}">聚合页面管理</el-breadcrumb-item>
        <el-breadcrumb-item>聚合页面详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="wrap">
      <div class="content">
        <el-form class="mt-30" ref="form" :model="form" label-width="150px" style="width: 900px;">
          <div>
            <div class="fl-l">
              <el-form-item label="栏目分类：" prop="type">
                <span>聚合页面</span>
                <!-- <span v-if="form.type == 2">热点资讯</span>
                <span v-if="form.type == 3">最新活动</span> -->
              </el-form-item>
              <el-form-item label="关键词：" prop="majorWord">
                <span style="white-space: nowrap;">{{form.majorWord}}</span>
              </el-form-item>
            </div>

            <div class="fl-l" :class="!form.pcCoverImage && !form.wapCoverImage ? '' :'h-200'">
              <el-form-item class="pc-img" label="pc封面图片：" prop="pcCoverImage">
                <div class="avatar-uploader">
                  <img v-if="form.pcCoverImage" :src="form.pcCoverImage" class="avatar">
                </div>
              </el-form-item>
              <el-form-item label="手机封面图片：" prop="wapCoverImage">
                <div class="avatar-uploader">
                  <img v-if="form.wapCoverImage" :src="form.wapCoverImage" class="avatar">
                </div>
              </el-form-item>              
            </div>

            <div class="fl-l" v-if="form.type == 1">
              <el-form-item label="pc链接地址：" prop="articleLink">
                <a :href="form.articleLink" target="_blank" v-if="form.articleLink">点击查看</a>
              </el-form-item>
              <el-form-item label="手机链接地址：" prop="phoneArticleLink">
                <a :href="form.phoneArticleLink" target="_blank" v-if="form.phoneArticleLink">点击查看</a>
              </el-form-item>
            </div>   
            <div class="fl-l">
              <el-form-item style="height:32px;" label="视频：" prop="advertVideoUrl" v-if="form.type == 2 || form.type == 3">
                <template slot-scope="scope">
                  <el-button type="text" v-if="form.advertVideoUrl" @click="videoShow = true">查看视频</el-button>
                  <span v-else>无</span>
                </template>
              </el-form-item>
              <!-- <el-form-item label="是否热门：" prop="isHot">
                  <span>{{form.isHot == 1 ? '是' : '否'}}</span>
                </el-form-item> -->
            </div>
            <!-- <div class="fl-l" v-if="form.type == 3">
              <el-form-item label="是否需要报名：" prop="isSupportSignUp">
                <span>{{form.isHot == 1 ? '是' : '否'}}</span>
              </el-form-item>
              <el-form-item label="报名截止日期：" prop="signUpEndTime" v-if="form.isSupportSignUp == 1">
                <span>{{form.signUpEndTime}}</span>
              </el-form-item>
            </div> -->

            <div class="fl-l">              
              <el-form-item label="排序：" prop="sort">
                <span>{{form.sort}}</span>
              </el-form-item>
              <el-form-item label="状态：" prop="status">
                <span v-if="form.status == 1">草稿</span>
                <span v-if="form.status == 2">已发布</span>
                <span v-if="form.status == 3">下线</span>
              </el-form-item>
            </div>
            
            <el-form-item label="描述：" prop="seoDesc">
              <div class="text-val">{{form.seoDesc}}</div>
            </el-form-item>
            <el-form-item label="关键字：" prop="seoKeyword">
              <div class="text-val">{{form.seoKeyword}}</div>
            </el-form-item>
            <el-form-item label="备注：" prop="remark">
              <div class="text-val">{{form.remark}}</div>
            </el-form-item>
          </div>
          <el-form-item label="关键词详情：" prop="majorWordDetail">
            <div class="img-box" style="width: 700px" v-html="form.majorWordDetail"></div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    
    <!-- <dialog-video v-if="form.advertVideoUrl" :visible.sync="videoShow" :data="form"></dialog-video> -->
  </div>
</template>

<script>
// import DialogVideo from '@/components/video'
  export default {
    // components: {
    //   'dialog-video': DialogVideo
    // },
    data () {
      return {  
        form: {},
        actionUrl: '',
        videoShow: false,
        advertVideoUrl: '',
        videoLink: ''
      }
    },
    activated() {
      this.form.encryptId = this.$route.params.id;
      this.actionUrl = this.$api.upload()
      this.getDetail();
    },
    created() {
      this.form.encryptId = this.$route.params.id;
      this.actionUrl = this.$api.upload()
      this.getDetail();
    },
    methods: {
      getDetail() {
        this.$api.aggregation.selectByEncryptId({'encryptId':this.form.encryptId}).then(res => {
          this.form = res.data
          this.form.advertVideoUrl = res.data.advertVideoUrl
          // 视频中固定传参videoLink，才能把值放入source
          this.form.videoLink = res.data.advertVideoUrl
        })
      }
    }
  }
</script>
<style lang="less">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .img-box{
   p{
     width: 100%;
     img{
        width: 100%;
      }
   }
   
 }
</style>